<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="index.js"></script>
  <script>
    const state = reactive({
  name: '小野森森',
  age: 34,
  hobby: ['piano', 'travel', 'film'],
  info: {
    job: 'teacher',
    students: [
      {
        id: 1,
        name: '小张'
      },
      {
        id: 2,
        name: '小王'
      }
    ]
  },

});
 console.log(  state.name );
 console.log(  state.info );
 console.log(  state.hobby );
 
  state.name = '小野';

 state.hobby.push('coding');

 state.info.job = 'FE teacher';
state.info.students.push({
  id: 3,
  name: '小李'
});

 
 

  </script>
</body>
</html>